﻿/*
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-10 09:38:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-10 10:25:29
 */
// 获取元素 
// window.onload = function(){
//     var divEle = document.getElementById('cen_right_top');
//     var h3Ele = divEle.getElementsByTagName('h3');
//     var contentEle = divEle.getElementsByTagName('div');
//     for(var i=0;i<h3Ele.length;i++){
//         h3Ele[i].dataset.index = i;
//         h3Ele[i].onclick = function(){
//             // alert(i) 都是3 当用户点击 说明 每个按钮都已经绑定上了点击时间 事件
//             //说明for循环已经结束  
//             // i 的结果就是 3 
//             // 绑定点击事件以前 需要 保存每个按钮的索引  
            

//             //保存索引以后 点击哪个按钮 哪个按钮就是this 
//             // alert(this.dataset.index);

//             // 为了保证 每次只有一个按钮高亮  每次只有一个内容显示 
//             // 点击按钮 第一件事 就是 让所有的按钮全部取消高亮
//             //  让所有的内容全部隐藏 

//             for(var j=0;j<h3Ele.length;j++){
//                 h3Ele[j].className = '';
//                 contentEle[j].style.display = 'none';
//             }

//             //点击谁 谁高亮
//             h3Ele[this.dataset.index].className = 'active'; 
//             contentEle[this.dataset.index].style.display = 'block';
//         }
//     }
// }
window.onload = function(){
    var divEle = document.getElementById('cen_right_top');
    // var h3Ele = divEle.getElementsByTagName('h3');
    var h3Ele = divEle.querySelectorAll('h3');
    var contentEle = divEle.getElementsByTagName('div');
    // h3Ele = [...h3Ele]; // getElementsByTagName 不能直接用forEach 
    // 需要把它展开放到 [] 中 
    // querySelectorAll 可以直接forEach 

    // getElementsByTagName 得到的是一个动态的数组  
    // querySelectorAll 是一个静态的数组  

    // 它俩都是伪数组   
    // querySelectorAll 是静态的   最像咱们的纯数组 
    h3Ele.forEach(function(item,index){
        item.onclick = function(){
            alert(index);
        }
    });
}



// var arrs = [555,666,777,888,999];

// for(var i=0;i<arrs.length;i++){
//     arrs[i] = 333;
// }

// console.log(arrs);

// arrs.forEach(function(item){
//     item = 333
// })

// console.log(arrs); //[555,666,777,888,999];


// 简化版的for循环 


// forEach  在遍历的时候 对每个元素和索引进行了锁定  元素永远是这个元素
// 索引永远是这个索引 